<script lang="ts" setup>
import type { ListByUserMessageType } from './utils/model'
import { useDetail } from '@/views/admin/system/notice/utils/detail'
import SpTable from '@/components/SpTable/index.vue'
import { transformI18n } from '@/plugins/i18n'

type Props = {
  data: ListByUserMessageType
}
const themeToken = getThemeTokenHook()

const { data } = defineProps<Props>()

const {
  open,
  messageTargets,
  messageTargetsLoading,
  messageTargetsParams,
  columns,
  afterOpenChange,
  paginationChange,
  clear,
  search
} = useDetail(data)
</script>

<template>
  <div class="details">
    <SpMdPreview
      :data="data.content"
      :style="{
        background: themeToken.colorBgElevated
      }"
    />
    <div class="read">
      <a-button size="small" type="link" @click="open = true">查看阅读情况</a-button>
    </div>
    <a-drawer
      v-model:open="open"
      placement="right"
      title="阅读情况"
      width="60%"
      @after-open-change="afterOpenChange"
    >
      <a-form :labelCol="{ style: { width: '70px' } }" label-align="left">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="搜索内容">
              <a-input v-model:value="messageTargetsParams.value" placeholder="请输入搜索内容" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="阅读状态">
              <a-select
                v-model:value="messageTargetsParams.isRead"
                placeholder="请选择信息阅读状态"
              >
                <a-select-option :value="0">未读</a-select-option>
                <a-select-option :value="1">已读</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item>
              <a-space :size="15">
                <a-button type="primary" @click="search"
                  >{{ transformI18n('table.query.search') }}
                </a-button>
                <a-button @click="clear">{{ transformI18n('table.query.clear') }}</a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <SpTable
        :column-list="columns"
        :data="messageTargets"
        :loading="messageTargetsLoading"
        :paging="messageTargetsParams"
        @pagination-change="paginationChange"
      />
    </a-drawer>
  </div>
</template>

<style scoped>
.details {
  height: 70vh;
  overflow: auto;
  border-radius: 10px;
  .read {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
  }
}
</style>
